<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="./css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./css/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <style>
        li {
            list-style: none
        }
        a{
            text-decoration: none;
            color:#95B8E7
        }
        .left{
            position: absolute;
            left: 15px;
            line-height:50px;
        }
        .right{
            text-align: right;
            position: absolute;
            right: 15px;
        }
        .right p{
            margin: 0;
        }
        #menus {
            padding: 0
        }

        #menus li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            text-align: center;
            border-bottom: 1px #ffa solid;
            position: relative;
        }

        #menus li a {
            color: blue;
            display: inline-block;
        }

        #menus li span {
            position: absolute;
            right: 10px;
            top: 6px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: darkslategrey;
            line-height: 15px;
            color: #fff;
            opacity: 0.8;
        }

        .top {
            background: url("http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/03/74/0e474909d93faf7a19fc341cb6f6f7f0.jpg") no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        .leftwest {
            background-color: powderblue;
        }

        .panel-title {
            text-align: center
        }
    </style>
</head>

<body>

        <div class="easyui-layout" data-options=" fit:true,border:false">
                <div data-options="region:'north'" style="height:70px" class="top">
                    <div class="right">
                        <p style="margin:10px;"><strong class="admin" style="color:red"></strong>&nbsp;&nbsp;&nbsp;欢迎你登录！</p>
                        <p style="margin-bottom:10px">
                            <a href="#">网站首页　｜</a>
                            <a href="#">支持论坛　｜</a>
                            <a href="#">帮助中心　｜</a>
                            <a href="#" class="close">安全退出</a>
                        </p>
                    </div>
                </div>
                <div data-options="region:'south',split:true" style="height:50px;">
                    <center>版权</center>
                </div>
                <div data-options="region:'west',split:true" title="导航菜单" style="width:200px;" class="leftwest">
                    <ul id="menus">
                        <li><a link="./views/user.html" href="javascript:void(0)">用户管理</a><span>&gt;</span>
                        </li>
                        <li><a link="./views/cate.html" href="javascript:void(0)">分类管理</a><span>&gt;</span></li>
                        <li><a link="./views/news.html" href="javascript:void(0)">新闻管理</a><span>&gt;</span></li>
                        <li><a link="./views/product.html" href="javascript:void(0)">产品管理</a><span>&gt;</span></li>
                        <li><a link="./views/order.html" href="javascript:void(0)">订单管理</a><span>&gt;</span></li>
                    </ul>
                </div>
                <div data-options="region:'center',title:'管理',iconCls:'icon-ok'">
                    <div id="tt" class="easyui-tabs" data-options="fit:true">
                    </div>
                </div>
            </div>
    <script>
        if(localStorage.getItem('username')){
            $('.admin').html(localStorage.getItem('username'));
        }else{
            alert('请登录');
            location.href='./wrap.html';
        }
        $('.close').click(function(){
            localStorage.removeItem('username');
            location.href='./wrap.html';
        });

        var globalURL='http://10.31.162.112:3000/';
        $(document).ready(function(){
            addPanel('首页','./views/main.html');
        });
        $("#menus li a").click(function () {
            var link = $(this).attr('link');
            var title = $(this).text();
            if ($('#tt').tabs('exists', title)) {
                $('#tt').tabs('select', title);//选中并刷新
            }else{
                 addPanel(title, link);
            }

        })

        function addPanel(title,link) {
            $('#tt').tabs('add', {
                title: title,
                content:  `<iframe src="${link}" frameborder="0" style="width:100%;height:100%"></iframe>`,
                closable: true
            });
        }

        function removePanel() {
            var tab = $('#tt').tabs('getSelected');
            if (tab) {
                var index = $('#tt').tabs('getTabIndex', tab);
                $('#tt').tabs('close', index);
            }
        }
        //addPanel();
    </script>

</body>

</html>